<template>
    <div class="header">
        <a href="#">
            <img src="../../assets/vue.svg" class="logo" width="25px">
            <span class="company">学员管理系统</span>
        </a>
        <el-dropdown @command="handleCommand" trigger="click">
            <span class="el-dropdown-link">
                {{ userStore.user?.name }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="a">修改密码</el-dropdown-item>
                    <el-dropdown-item command="b">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <span class="date">{{ currentTime }}</span>

        <!-- 修改密码对话框 dialogFormVisible为true时对话框显示，否则为隐藏 -->
        <el-dialog v-model="dialogFormVisible" title="修改密码" width="500">
            <el-form :model="userForm" ref="userFormRef" label-width="100px" label-position="right"
                 :rules="rules">
                <el-form-item label="原始密码" prop="oldPass">
                    <el-input v-model="userForm.oldPass" type="password" />
                </el-form-item>
                <el-form-item label="新密码" prop="pass">
                    <el-input v-model="userForm.pass" type="password" />
                </el-form-item>
                <el-form-item label="确定密码" prop="checkPass">
                    <el-input v-model="userForm.checkPass" type="password" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="updatePwd(userFormRef)">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { formateTime } from '@/utils/dataUtils';
import { ArrowDown } from '@element-plus/icons-vue';
import { onMounted, reactive, ref } from 'vue';
import useUserStore from '@/store/modules/user';
let userStore = useUserStore()
import { useRouter } from 'vue-router';
import type { FormInstance, FormRules } from 'element-plus';
import { reqCheckPwd, reqUpdatePwd } from '@/api/user';
const $router = useRouter()
const handleCommand = (command: string | number | object) => {
    switch (command) {
        case "a":
            // 修改密码
            dialogFormVisible.value = true
            break;
        case "b":
            handleLogout();
            break;

        default:
            break;
    }
}
// 退出登录
const handleLogout = () => {
    userStore.removeUser()
    $router.replace("/login")
}
// 修改密码弹出是否显示
const dialogFormVisible = ref(false);
// 修改密码表达数据收集对象
const userForm = reactive({
    oldPass: "",
    pass: "",
    checkPass: ""
})
// 校验原密码自定义规则
const validateOldPass = (rule: any, value: any, callback: any) => {
    reqCheckPwd({ userId: (userStore.user?._id as string), password: value }).then(response => {
        console.log(userStore.user?._id);
        
        console.log(value);
        
        if (response.status == 0) {
            callback()
        } else {
            console.log(response);
            
            
            callback(new Error(response.msg))
        }
    })
};
// 校验确定密码自定义规则
const validatecheckPass = (rule: any, value: any, callback: any) => {
    if (value !== userForm.pass) {
        callback(new Error("两次密码输入不一样"));
    } else {
        callback();
    }
};

// 表单ref对象
const userFormRef = ref()
// 表单校验规则
const rules = reactive<FormRules>({
    oldPass: [{ required: true, validator: validateOldPass, trigger: "blur" }],
    pass: [{ required: true, message: "请输入新密码", trigger: "blur" }],
    checkPass: [{ required: true, validator: validatecheckPass, trigger: "blur" }],
});
// 确定按钮点击回调函数
const updatePwd = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            //   调用接口返回密码
            reqUpdatePwd({ userId: (userStore.user?._id as string), password: userForm.pass }).then(response => {
                // 如果修改成功
                if (response.status == 0) {
                    // 退出登录
                    handleLogout()
                    // 关闭对话框
                    dialogFormVisible.value = false
                }
            })
        }
    })
}
// 页面显示时间
let currentTime = ref<string>('')
// 每隔一秒获取当前时间
const getTime = () => {
    setInterval(() => {
        currentTime.value = formateTime(Date.now())
    }, 1000);
}
onMounted(() => {
    getTime()
})
</script>

<style scoped>
.logo {
    vertical-align: middle;
    padding: 0 10px 0 40px;
}

.company {
    position: absolute;
    color: white;
}

.el-dropdown {
    float: right;
    margin-right: 40px;
    height: 50px;
    line-height: 50px;
}

.el-dropdown-link {
    cursor: pointer;
    color: #fff;
}

.date {
    float: right;
    color: #fff;
    margin-right: 50px;
}
</style>